不知不覺，也來到今年鐵人賽的最後一篇文章。在今天的內容開始前，先快速回顧一下過去 29 天的內容：

首先我們認識了 Next.js 13 主要的三項改版內容：

1. Compiler Infrastructure 優化：Day 07 提到的 Turbopack
2. Rendering Infrastructure 優化：Day 08 ～ Day 22 介紹了新的路由架構 App Router，與 React Server Components
3. Component Toolkit：Day 26 介紹了圖片優化的工具 next/image 和 Day 27 介紹了 JS 載入優化的工具 next/dynamic

Day 23 ～ 25 也花了點時間認識目前還在測試階段的 Server Actions，最後 Day 28 和 Day 29 認識了 Next.js 13 錯綜複雜的快取機制。

總結 Next.js 13 改版

假如要用一句話來總結 Next.js 13 的改版內容，我會說「兼顧網頁效能、使用者體驗 ( UX ) 與開發者體驗 ( DX )的嘗試」。

呼應 Day 02 提到的，Pre-Rendering、Server Components、Streaming、Code Splitting、Prefetching、Lazy Loading 等優化效能和 SEO 的機制，不使用 Next.js 也可以做到，但 Next.js 讓開發門檻變得更低了一些。

但為什麼會我只敢說「嘗試」呢？一方面是因為 App Router 進入 stable 階段也還沒有很久，很多功能和工具像是 Turbopack 或 Server Actions 也還在 alpha\beta 階段；另一方面，開發體驗頗見仁見智，可能會根據開發者的設備和習慣有所差異。雖然小弟我到目前為止對於 Next.js 13 的開發體驗頗滿意，能明顯感受出使用 Next.js 13 實現以上提到的優化的便利性。但也不乏在國外論壇上看到許多批評聲量。

像是之前 Reddit 的文章，可看出許多開發者對於 SSR 與 Server Components 的誤解 ( 兩者差異可參考 Day 10 文章)，Vercel 的 DX 部門 VP - Lee Robinson，還為了回覆這篇文章發了一部影片，釐清 SSR、Server Components 和 Client Components 的差異。

或像我也蠻常關注的開發者 Theo，也發過一部 App Router 心得分享影片，當中提到專案規模比較大時，一堆 page.tsx、layout.tsx 反而很難管理。又或是目前 App Router 開發模式假如不使用 Turbopack，cold start 和 HMR 的速度很慢，讓他覺得 DX 很差。

或前幾篇文章有提到對於 Server Actions 的必要性與資安疑慮的質疑，或是被快取機制搞的一頭無水。

總結來說，Next.js 和 App Router 只是一個選項，你也可以使用其他 framework/meta-framework，像是常被拿來與 Next 比較的 Remix 和 Astro；用 Next 也還是可以使用 Pages Router ( 至少目前官方承諾會持續維護 )。這部分就留給讀著們自行體驗選擇了！

閱讀完本系列的下一步

假如閱讀完本系列文章，有興趣了解更多關於 Next.js 的資訊，小弟也提供一些方向和資源給大家參考：

把手弄髒
個人覺得最有效的學習方法還是動手實作，親自去踩雷看看。假如有時間，也可以比較一下其他的 framework/meta-framework，像是 Remix、Astro 等等，我自己之後閒暇之餘，也蠻想試試用其他 framework/meta-framework 或甚至單純用 React + Express 模擬這 30 天介紹的功能，才能更明確感受 Next 的優缺點。

認識 Vercel 開發的工具 / 服務
除了 Next.js 外，Vercel 還開發了許多新潮與實用的工具。像是 Vercel 的雲端部署服務，可以讓小弟這種比較不熟悉後端和 Infra 的開發者，也能輕鬆地部署專案，還可以綁定 GitHub 做到 CI/CD 等方便的功能可以使用。網上已有許多教學，小弟就不多做介紹，有需要的讀者可參考官方文件。

除此之外，因應近年的 AI 熱潮，Vercel 也有整合幾個 AI 服務，提供時用的工具。像是 AI UI library - Vercel AI SDK，或是可和 AI 對話，請它產生 components 程式碼的工具 - Vercel v0。

Follow 社群
假如想獲得第一手消息，我也很推薦追蹤幾個 Vercel 或 React 成員的 Twitter ( 怕打 X 大家看不懂)，或加入 Next.js Discord 社群，這邊提供幾位我有追蹤的帳號和官方 Discord 連結給大家參考：

• 官方帳號：
  Vercel
  Next.js

• 官方社群:
  Next.js Discord

• Vercel/React 成員：
  Guillermo Rauch：Vercel CEO
  Lee Robinson：Vercel VP of Developer Experience
  Dan Abramov：React 核心團隊成員，也是 Redux 的作者

  補充一下 Dan，我第一次知道他是在 React Conf 2018 的影片，當時覺得他散發一種很 chill 很 nice 的氣息，在介紹 hooks 時邏輯脈絡又超清晰，所以印象深刻。

  假如想多了解 React hooks 的設計理念，蠻推薦讀者可以看 React Conf 2018 Dan 的片段

  後來發現他頗常在社群與大家交流技術問題，也寫了很多技術相關的文章，像是 Day 10 文章有引用的 React Server Components deep dive 。有興趣的讀者可以參考他充滿工程師惡趣味的個人網站。

Next.js Learn
Next.js 14 版推出了一套針對 App Router、authenticaion、database 使用的免費課程，有興趣的讀者可參考Next.js Learn

完賽感言

最後，這次參加鐵人賽，有些心得想和大家分享：

侷限 -> 選擇
我很喜歡 Huli 大神在讓前端成為選擇這篇文章的最後一句話：

讓前端成為你的選擇，而不是侷限

將侷限轉為選擇的概念，不只可以應用在專業技能上，也可以應用在職涯選擇上。

小弟我也是文組畢業，過去幾年都在行銷產業打滾。老實說一直都對寫程式很有興趣，大學閒暇之餘也有透過線上資源自學前端，但始終無法突破「文組」這個框架，勇敢嘗試軟體工程師這條路。

在行銷產業載浮載沉了幾年，直到去年生日突然有個很大的感觸，決定放手一博去嘗試那些我嚮往已久，卻始終沒去做的事，其中成為軟體工程師便是首要項目。於是報名了 AppWorks School，也很幸運地錄取了培訓計畫，並在今年六月畢業後正式開啟了軟體工程師的職涯。

雖然小弟目前還很菜，還有許多要努力學習的地方。但也想鼓勵那些嚮往某個領域已久，卻始終被自己設立的框架而侷限住的讀者，讓過去的所知所學成為選擇，而不是侷限。

熟悉的廣告台詞：有些事不做不會怎樣，做了很不一樣

從分享發現自己的不足
回顧這 30 天最常出現的情緒，大概是「頓悟」。有無數次，在寫文章的過程，或甚至半夜睡到一半突然驚醒，發現突然懂了 source code 在寫什麼，或以前始終無法理解的幾個概念和技術。

透過撰寫這 30 篇文章，我釐清了許多以前的錯誤觀念，像是 Client Component 等於在 client-side 渲染的 components。也因為更佳了解網頁渲染邏輯、Next 運作機制、Server Components 與 Client Components 的規則，與快取機制等觀念，發現自己在遇到 bug，或畫面呈現不如預期時，能更快更準確地釐清問題緣由，工具庫也變更豐富。

最後，要特別感謝 AppWorks School 的導師小賴和谷哥，給了我很多建議和自信。以及公司的後端工程師們，忍受被我巴著問一堆 backend 和 infra 的問題。

假如對於本系列的文章有什麼疑問，或發現小弟我有寫錯的地方，或是對於轉職、技術上有些想法想和小弟交流的讀者，也歡迎私訊我！

再次感謝大家耐心的閱讀，希望這 30 天的內容對大家有幫助！